<template>
    <div class="back_contain_n visualImg">
        <div class="box">
            <div class="edit_part">
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">看板名称：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.boardName}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.boardName" maxlength="20" placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">访问地址：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.address}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.address" maxlength="60" placeholder="请输入网址"
								  show-word-limit clearable></el-input>
						<p @click="addCopy()" class="_copy" title="复制地址"><i class="el-icon-document-copy"></i></p>
					</div>
				</li>
				<li class="list">
					<div class="part_nav part1">
						<p class="firstTitle">所在位置：</p>
					</div>
					<div class="part_nav part2">
						<p v-if="!isEdit">{{themeInfo.boardLocal}}</p>
						<el-input class="change_input" v-else v-model="themeInfo.boardLocal" maxlength="20" placeholder="请输入内容，最多输入20个字符" show-word-limit clearable></el-input>
					</div>
				</li>
				<div class="btns">
					<p @click="isEdit = true" v-if="!isEdit" class="zll-botton download">编 辑</p>
					<p @click="submitFun" v-else class="zll-botton">保 存</p>
				</div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            addDialog: false,
			isEdit: false,
			themeInfo: {

            	address:'www',
				boardName:'',
				boardLocal:'',

            },

			chinese: {
				boardName: '看板名称',
				address: '看板地址',
				boardLocal: '看板位置'
			},

			type: '',
			editData: {},

        }
    },
    mounted() {
        let self = this;
		self.getFirstList();
    },
    methods: {

        addCopy() {
            const oInput = document.createElement('input')
            oInput.value = this.themeInfo.address;
            document.body.appendChild(oInput)
            oInput.select()
            document.execCommand('Copy')
            this.$message({
                message: '复制成功',
                type: 'success'
            })
            oInput.remove()
        },


		getFirstList() {
			let self = this;
			for (let key in self.themeInfo) {
				self.themeInfo[key] = '';
			}
			self.$http({
				url: "/jinl/front/getFrontDisplay",
				method: "post",
				params: {type: 'storage'}
			}).then(resp => {
				if (resp.success) {
					let frontDisplays = resp.result.frontDisplays || [];
					if (frontDisplays.length == 0) {
						return;
					}
					for (let data of frontDisplays) {
						let pageKey = data.pageKey;
						if (!pageKey || !self.themeInfo.hasOwnProperty(pageKey)) {
							continue;
						}
						self.themeInfo[pageKey] = data.pageContent;
					}
				}
			});
		},

		submitFun() {
			let self = this;
			let frontDisplays = [];
			for (let key in self.chinese) {
				if (!self.themeInfo[key]) {
					self.$message.warning(self.chinese[key] + '不能为空！');
					return;
				}
				let vo = {pageKey: key, pageContent: self.themeInfo[key], pageType: key, pageAttr: 'storage'};

				frontDisplays.push(vo);
			}
			let params = {frontDisplays: frontDisplays, pageAttr: 'storage'};
			self.$http({
				url: "/jinl/front/addOrUpdateFrontDisplay",
				method: "post",
				data: JSON.stringify(params),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success) {
					self.$message.success('修改成功！');
					self.isEdit = false;
					return;
				}
				self.getFirstList();
				self.$message.warning(resp.message);
			});
		},
    },
}
</script>
<style lang="scss" scoped>
.topic_ {
    line-height: 40px;
    margin-top: 15px;
    i {
        margin-right: 10px;
    }
    span {
        color: #918d8d;
    }
}
.img_up {
    height: 100%;
}
.visualImg {
    .box {
        margin-bottom: 15px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;flex-direction: column;
        .edit_part {
            width: 60%;
        }
        .btns {
            display: flex;
            margin-top: 20px;
            .zll-botton {
                width: 90px;
                font-size: 14px;
            }
        }
    }
    .list {
        border-top: 1px solid #f2f2f2;
        display: flex;align-items: center;
        &:nth-child(1) {
            border-top: 0;
        }
        .part2 {
            width: calc(100% - 150px);
            height: 100%;
            display: flex;
            align-items: center;
            padding: 15px 0;
            position: relative;
            p {
                font-size: 14px;
            }
            ._copy {
                color: #1890ff;
                cursor: pointer;
                font-size: 16px;
                margin-left: 20px;
                &:hover {
                    opacity: .7;
                }
            }
        }
        .part1 {
            width: 150px;
            height: 56px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            &._last {
                margin: 27px 0;
            }
            .firstTitle {
                font-size: 14px;
                text-align: left;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
            }
            .subTitle {
                font-size: 12px;
                padding-left: 20px;
                color: #999;
                margin: 5px 0 0 0;
            }
        }
    }
}
.tableList {
    margin-top: 20px;
    position: relative;
    table {
        width: 100%;
        border-collapse: collapse;
        border:1px solid #e6e6e6;
        text-align: center;
        table-layout: fixed;
        th {
            background: #ddd;
            color: #918d8d;
            padding: 3px;
            font-weight: normal;
            height: 26px;
            line-height: 26px;
        }
        td {
            padding: 3px;
            height: 26px;
            line-height: 26px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            p {
                padding: 0 5px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            span {
                color: #1890ff;
                cursor: pointer;
                margin: 0 5px;
                &:hover {
                    opacity: .8;
                }
            }
        }
        tr {
            background: #FAFAFA;
            border: 1px solid #EBEEF5;
            &:nth-of-type(2n) {
                background: #fff;
            }
        }
    }
}
</style>
